<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<header>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>宠爱</title>

    <!-- Favicons -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">
    <script th:src="@{/assets/js/vendor.min.js}"></script>
    <script th:src="@{/assets/js/plugins.min.js}"></script>
    <!--Main JS-->
    <script th:src="@{/assets/js/main.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/jquery-3.2.1.slim.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/axios.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/bootstrap.js}"></script>
    <script th:src="@{/assets/js/vue.js}"></script>

    <link rel="stylesheet" th:href="@{https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css}"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


</header>

<body>
<div id="hos">
    <!-- 头部导航栏，引入公共片页面 -->
    <div class="header section" th:replace="~{common/head::head}"></div>

    <!--医院预约标题栏、搜索框-->
    <div class="section col-md-12" style="height: 70px; background-color: #f4f4f4">
        <div>
            <div class="col-lg-6" style="left: 45%;top: 10px">
                <div style="margin-top: auto;font-family: 黑体;font-size: 35px;width: 200px;float: left">医院预约</div>
            </div>
        </div>
        <div class="input-group" style="width: 270px;float: right;top: 18px">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" @click="search()">搜索</button>
            </span>
            <input type="text" class="form-control" placeholder="搜索关键词" v-model="hospitalName" style="width: 200px">
        </div>
    </div>

    <!--My Account Section Start-->
    <div class="section section-margin" style="background: #f3faff">
        <div class="container">
            <div class="row" style="margin: 30px auto">
                <!--页面左侧医院信息-->
                <div class="col-md-9" style="background: white;width: 800px">
                    <div class="tion_left">
                        <!--循环所有医院-->
                        <div class="tion_dl clearfix" v-for="h in hospitalList" style="height: 230px;margin-top: 20px">
                            <!--医院图片-->
                            <div style="float:left; width: 330px;height: 190px"><a href="javascript:void(0)"><img
                                    :src="'http://localhost:8080/uploadFile/hospital/'+h.hospitalCover" alt="h.hospitalName"
                                    style="width: 300px;height: 190px"></a></div>
                            <!--医院信息-->
                            <div style="float: right; width: 420px">
                                <div class="clearfix" style="width: 330px;height: 190px;float: left">
                                    <div>
                                        <div style="height: 70px">
                                            <a href="javascript:void(0)"
                                               style="font-family: 微软雅黑; font-size: 20px;display: block; margin-top: 15px;color: black;text-decoration:none">{{h.hospitalName}}</a>
                                        </div>
                                        <div>
                                            <div style="height: 28px">
                                                <span style="color: black;font-size: 16px;font-family: 微软雅黑">电 话：</span>
                                                <span style="font-family: 微软雅黑; font-size: 16px;color: #ef7256;font-weight: bold">{{h.hospitalPhone}}</span>
                                            </div>
                                            <div >
                                                <span style="color: black;font-size: 16px;font-family: 微软雅黑">地 址：</span>
                                                <span style="font-family: 微软雅黑; font-size: 16px;color: black;font-weight: bold">{{h.hospitalAddress}}</span>
                                            </div>
                                            <div style="height: 28px">
                                                <span style="color: black;font-size: 16px;font-family: 微软雅黑">营业时间：</span>
                                                <span style="font-family: 微软雅黑; font-size: 16px;color: black;font-weight: bold">{{h.openTime}}</span>--
                                                <span style="font-family: 微软雅黑; font-size: 16px;color: black;font-weight: bold">{{h.closeTime}}</span>
                                            </div>

                                        </div>
                                    </div>
                                </div >
                                <!--查看详情按钮-->
                                <div style="float: right;margin-top: 100px">
                                    <button type="button" class="btn btn-info" onclick="view(this)" :id="h.hospitalId">查看详情</button>
                                </div>
                            </div>
                        </div>
                        <!--分页-->
                        <div>
                            <div style="width: 200px; margin: 0 auto">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination">
                                        <li>
                                            <a href="javascript:void(0)" aria-label="Previous" @click="goPrePage()">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                        <li v-for="page in pages" :key="page"><a href="javascript:void(0)" @click="goPage(page)">{{page}}</a></li>
                                        <li>
                                            <a  href="javascript:void(0)" aria-label="Next" @click="goNextPage()">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>

                        </div>
                    </div>
                </div>
                <!--页面右侧服务列表-->
                <div class="col-md-2 col-md-offset-1" style="background: white;height: 530px">
                    <div class="tion_rihht">
                        <div class="tion_dl clearfix" style="margin-top: 20px">
                            <h3 style="text-align: center;color: skyblue;font-family: 微软雅黑">服务项目</h3><p/>
                            <ul class="tion_ul clearfix" style="margin-top: 10px">
                                <li style="height: 35px" >
                                    <div style="margin-top: 5px">
                                        <span class="glyphicon glyphicon-heart"></span>
                                        <a href="javascript:void(0)"  style="text-decoration:none; font-size: 16px"  >宠物健康管理</a>
                                    </div>
                                </li>
                                <li style="height: 35px">
                                    <div style="margin-top: 5px">
                                        <span class="glyphicon glyphicon-heart"></span>
                                        <a href="javascript:void(0)"  style="text-decoration:none; font-size: 16px"  >常规门诊</a>
                                    </div>
                                </li>
                                <li style="height: 35px">
                                    <div style="margin-top: 5px">
                                        <span class="glyphicon glyphicon-heart"></span>
                                        <a href="javascript:void(0)"  style="text-decoration:none; font-size: 16px"  >猫专科门诊</a>
                                    </div>
                                </li>
                                <li style="height: 35px">
                                    <div style="margin-top: 5px">
                                        <span class="glyphicon glyphicon-heart"></span>
                                        <a href="javascript:void(0)"  style="text-decoration:none; font-size: 16px"  >狗专科门诊</a>
                                    </div>
                                </li>
                                <li style="height: 35px">
                                    <div style="margin-top: 5px">
                                        <span class="glyphicon glyphicon-heart"></span>
                                        <a href="javascript:void(0)"  style="text-decoration:none; font-size: 16px"  >异宠专科</a>
                                    </div>
                                </li>
                                <li style="height: 35px">
                                    <div style="margin-top: 5px">
                                        <span class="glyphicon glyphicon-heart"></span>
                                        <a href="javascript:void(0)"  style="text-decoration:none; font-size: 16px"  >清洗服务</a>
                                    </div>
                                </li>
                                <li style="height: 35px">
                                    <div style="margin-top: 5px">
                                        <span class="glyphicon glyphicon-heart"></span>
                                        <a href="javascript:void(0)"  style="text-decoration:none; font-size: 16px"  >口腔保健</a>
                                    </div>
                                </li>
                                <li style="height: 35px">
                                    <div style="margin-top: 5px">
                                        <span class="glyphicon glyphicon-heart"></span>
                                        <a href="javascript:void(0)"  style="text-decoration:none; font-size: 16px"  >宠物疫苗</a>
                                    </div>
                                </li>
                                <li style="height: 35px">
                                    <div style="margin-top: 5px">
                                        <span class="glyphicon glyphicon-heart"></span>
                                        <a href="javascript:void(0)"  style="text-decoration:none; font-size: 16px"  >检验科</a>
                                    </div>
                                </li>
                                <li style="height: 35px">
                                    <div style="margin-top: 5px">
                                        <span class="glyphicon glyphicon-heart"></span>
                                        <a href="javascript:void(0)"  style="text-decoration:none; font-size: 16px"  >寄养服务</a>
                                    </div>
                                </li>
                                <li style="height: 35px">
                                    <div style="margin-top: 5px">
                                        <span class="glyphicon glyphicon-heart"></span>
                                        <a href="javascript:void(0)"  style="text-decoration:none; font-size: 16px"  >行为咨询服务</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
    <!--My Account Section End-->

    <!-- 底部信息栏 -->
    <footer class="section footer-section" th:replace="~{common/foot::foot}"></footer>
    <!-- Footer Section End -->
</div>


</body>

<script>

    new Vue({
        el: "#hos",
        data: {
            hospitalList: [],
            hospitalName: "",
            pageNum:1,
            pageSize:3,
            total:0,
            pages:0,
            prePage:1,
            nextPage:1
        },
        created() {
            this.search()
        },
        methods: {
            search() {
                axios.get("http://localhost:9001/hospital/list", {
                    params: {
                        hospitalName: this.hospitalName,
                        pageNum:this.pageNum
                    }
                }).then((res) => {
                    console.log(res);
                    this.hospitalList = res.data.list
                    this.pageNum = res.data.pageNum
                    this.pageSize = res.data.pageSize
                    this.pages = res.data.pages
                    this.prePage = res.data.prePage
                    this.nextPage = res.data.nextPage
                })
            },
            view(id){
                console.log(id)
            },
            goPrePage(){
                this.pageNum = this.prePage
                this.search()
            },
            goNextPage(){
                if (this.pageNum!=this.pages){
                    this.pageNum = this.nextPage
                    this.search()
                }
            },
            goPage(page){
                this.pageNum = page
                this.search()
            }
        }
    })

    function view(obj) {
        let id=obj.id
        location.href="hospital/hos?hospitalId="+id

    }


</script>

</html>




